<template>
   <div>
      <!-- 面包屑导航区 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
         <el-breadcrumb-item :to="{ path: '/Welcome' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item>数据统计</el-breadcrumb-item>
         <el-breadcrumb-item>数据报表</el-breadcrumb-item>
      </el-breadcrumb>
      <!--   卡片视图区-->
      <el-card>
         <!-- 2.第二步 为ECharts准备一个具备大小（宽高）的Dom -->
         <div id="main" style="width: 850px;height:400px;"></div>
      </el-card>
   </div>
</template>

<script>
// 第一步引入echarts
// const echarts = require('echarts');
import * as echarts from 'echarts'
import _ from 'lodash'
// Vue.prototype.$echarts = echarts;
export default {
   data() {
      return {
         // 后台的option为了合并引入data
         options: {
            title: {
               text: '用户来源'
            },
            tooltip: {
               trigger: 'axis',
               axisPointer: {
                  type: 'cross',
                  label: {
                     backgroundColor: '#E9EEF3'
                  }
               }
            },
            grid: {
               left: '3%',
               right: '4%',
               bottom: '3%',
               containLabel: true
            },
            xAxis: [
               {
                  boundaryGap: false
               }
            ],
            yAxis: [
               {
                  type: 'value'
               }
            ]
         }
      }
   },
   created() {
   },
   // mounted周期函数里页面上的元素渲染完毕了
   async mounted() {
      // 第三步 3. 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'))
      // 发起请求获取数据
      const {data: res} = await this.$http.get('reports/type/1')
      if (res.meta.status !== 200) {
         return this.$message.error('获取折线图数据失败！')
      }
      console.log(res.data)
      this.$message.success('获取折线图数据成功！')

      // 4.准备数据和配置项
      myChart.setOption({})
      // 官方标准数据 option
      // let  option = {
      //    title: {
      //       text: '移动媒体曝光率'
      //    },
      //    tooltip: {
      //       trigger: 'axis',
      //       axisPointer: {
      //          type: 'cross',
      //          label: {
      //             backgroundColor: '#6a7985'
      //          }
      //       }
      //    },
      //    legend: {
      //       data: ['邮箱', '手机', '平台', '广告', '微博']
      //    },
      //    toolbox: {
      //       feature: {
      //          saveAsImage: {}
      //       }
      //    },
      //    grid: {
      //       left: '3%',
      //       right: '4%',
      //       bottom: '3%',
      //       containLabel: true
      //    },
      //    xAxis: [
      //       {
      //          type: 'category',
      //          boundaryGap: false,
      //          data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']
      //       }
      //    ],
      //    yAxis: [
      //       {
      //          type: 'value'
      //       }
      //    ],
      //    series: [
      //       {
      //          name: '邮箱',
      //          type: 'line',
      //          stack: 'Total',
      //          areaStyle: {},
      //          emphasis: {
      //             focus: 'series'
      //          },
      //          data: [120, 132, 101, 134, 90, 230, 210]
      //       },
      //       {
      //          name: '手机',
      //          type: 'line',
      //          stack: 'Total',
      //          areaStyle: {},
      //          emphasis: {
      //             focus: 'series'
      //          },
      //          data: [220, 182, 191, 234, 290, 330, 310]
      //       },
      //       {
      //          name: '平台',
      //          type: 'line',
      //          stack: 'Total',
      //          areaStyle: {},
      //          emphasis: {
      //             focus: 'series'
      //          },
      //          data: [150, 232, 201, 154, 190, 330, 410]
      //       },
      //       {
      //          name: '广告',
      //          type: 'line',
      //          stack: 'Total',
      //          areaStyle: {},
      //          emphasis: {
      //             focus: 'series'
      //          },
      //          data: [320, 332, 301, 334, 390, 330, 320]
      //       },
      //       {
      //          name: '微博',
      //          type: 'line',
      //          stack: 'Total',
      //          label: {
      //             show: true,
      //             position: 'top'
      //          },
      //          areaStyle: {},
      //          emphasis: {
      //             focus: 'series'
      //          },
      //          data: [820, 932, 901, 934, 1290, 1330, 1320]
      //       }
      //    ]
      // };

      // 5. 展示数据
      const result = _.merge(res.data, this.options)  // 合并操作--第一个参数：后台数据，第二个参数：需要合并的参数
      myChart.setOption(result)   //调echarts实例，option替换成result
   },
   methods: {}
}
</script>

<style lang="less" scoped>

</style>
